Angular Material Select কম্পোনেন্টটি একটি ড্রপডাউন সিলেক্ট লিস্ট তৈরির জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের কাছে একটি পরিষ্কার এবং স্বচ্ছল ইন্টারফেসে বিভিন্ন অপশন সিলেক্ট করার সুযোগ দেয়। Angular Material Select কম্পোনেন্টটি সাধারণ HTML সিলেক্ট ট্যাগের মতো কাজ করে তবে এটি আরও আধুনিক এবং উন্নত ডিজাইন ও ফিচার সরবরাহ করে, যেমন ইমেজ সহ অপশন, মাল্টিপল সিলেকশন, এবং কাস্টমাইজড লেবেল ইত্যাদি।
প্রথমে, MatSelectModule মডিউলটি app.module.ts ফাইলে ইমপোর্ট করতে হবে।
import { MatSelectModule } from '@angular/material/select';
@NgModule({
imports: [
MatSelectModule
]
})
export class AppModule { }
এখন, আপনার HTML ফাইলে mat-select ট্যাগ ব্যবহার করে সিলেক্ট ড্রপডাউন তৈরি করতে হবে। এর মধ্যে mat-option ট্যাগ ব্যবহার করে অপশনগুলো নির্ধারণ করতে হবে।
<mat-form-field appearance="fill">
<mat-label>Choose an option</mat-label>
<mat-select>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
mat-form-field: এটি একটি Angular Material ফর্ম ফিল্ড, যা সিলেক্টের লেবেল এবং আউটপুট স্টাইল কাস্টমাইজ করতে সাহায্য করে।mat-label: সিলেক্ট ফিল্ডের লেবেল হিসেবে কাজ করে।mat-select: এটি মূল সিলেক্ট কম্পোনেন্ট।mat-option: সিলেক্ট অপশনগুলো নির্ধারণ করতে ব্যবহৃত হয়।যদি আপনি Angular Reactive Forms বা Template-driven Forms ব্যবহার করতে চান, তবে FormControl ব্যবহার করতে হবে।
import { FormControl } from '@angular/forms';
export class AppComponent {
selectedOption = new FormControl('');
}
<mat-form-field appearance="fill">
<mat-label>Choose an option</mat-label>
<mat-select [formControl]="selectedOption">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Choose an option</mat-label>
<mat-select [(ngModel)]="selectedOption">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
Angular Material Select এ আপনি ডাইনামিক অপশনও যোগ করতে পারেন। উদাহরণস্বরূপ, আপনি একটি লিস্ট বা অ্যারে থেকে অপশনগুলো লোড করতে পারেন।
export class AppComponent {
options = ['Option 1', 'Option 2', 'Option 3'];
}
<mat-form-field appearance="fill">
<mat-label>Choose an option</mat-label>
<mat-select [(ngModel)]="selectedOption">
<mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
</mat-select>
</mat-form-field>
Material Select কম্পোনেন্টটি একাধিক অপশন সিলেক্ট করতে সমর্থন করে। এর জন্য multiple অ্যাট্রিবিউট ব্যবহার করতে হয়।
<mat-form-field appearance="fill">
<mat-label>Choose options</mat-label>
<mat-select multiple [(ngModel)]="selectedOptions">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
multiple: একাধিক অপশন সিলেক্ট করার জন্য।আপনি চাইলে mat-option এর ভিতরে আরও কাস্টম কন্টেন্ট (যেমন, ছবি) যোগ করতে পারেন।
<mat-form-field appearance="fill">
<mat-label>Choose an option</mat-label>
<mat-select>
<mat-option value="option1">
<img src="path/to/image1.jpg" alt="Image 1"> Option 1
</mat-option>
<mat-option value="option2">
<img src="path/to/image2.jpg" alt="Image 2"> Option 2
</mat-option>
</mat-select>
</mat-form-field>
[disabled] অ্যাট্রিবিউট ব্যবহার করে।<mat-select [disabled]="isDisabled">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
</mat-select>
Angular Material Select হল একটি অত্যন্ত কার্যকর এবং কাস্টমাইজযোগ্য ড্রপডাউন কম্পোনেন্ট, যা Angular অ্যাপ্লিকেশনে ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন বৈশিষ্ট্য যেমন একাধিক অপশন সিলেকশন, কাস্টম অপশন, এবং ডাইনামিক অপশন লোডিং সমর্থন করে। Angular Material Select ব্যবহার করে আপনি সহজেই সুন্দর, রেসপন্সিভ, এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এমন সিলেক্ট লিস্ট তৈরি করতে পারবেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
